<template>
  <div>
    <el-dialog
      v-model="centerDialogVisible"
      @close="refreshData"
      :title="drawerTitle"
      width="30%"
      align-center
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item :label="t('dataDictionary.dictName') + '：'" prop="dictName">
          <el-input v-model="ruleForm.dictName"  maxlength="30" />
        </el-form-item>
        <el-form-item :label="t('dataDictionary.dictCode') + '：'" prop="dictCode">
          <el-input v-model="ruleForm.dictCode"  maxlength="30" />
        </el-form-item>
        <el-form-item :label="t('dataDictionary.descriptions') + '：'" prop="descriptions">
          <el-input
            type="textarea"
            v-model.number="ruleForm.description"
            maxlength="300"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <hr />
        <span class="dialog-footer tf_btn">
          <el-button @click="onClose(ruleFormRef)">
            {{ t('dialogDemo.close') }}
          </el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            {{ t('common.ok') }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, inject } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { dictAdd, dictEdit } from '@/api/dataDictionary/index'
import { vCheckVal } from '@/directives/checkVal'
const ruleFormRef = ref<FormInstance>()

const { t } = useI18n()

let ruleForm = ref({
  dictName: '',
  dictCode: '',
  description: '',
  id: ''
})
const drawerTitle = ref('')
const addDataDialog = () => {
  drawerTitle.value = '新增'
}
const editDataDialog = () => {
  drawerTitle.value = '编辑'
}
// 接收值
const props = defineProps<{
  passStatus: boolean
}>()
const centerDialogVisible = ref<boolean>(false)
// console.log(props.passStatus, 'addStatus')
watch(
  () => props.passStatus,
  (newval: boolean, oldval: boolean) => {
    addDataDialog()
    ruleForm.value.dictName = ''
    ruleForm.value.dictCode = ''
    ruleForm.value.description = ''
    centerDialogVisible.value = newval
  }
)
// 接受父组件的编辑信号
const getParentParams: any = (params, onStatus) => {
  // console.log('编辑', params) //dictEdit
  ruleForm.value.id = params.id
  editDataDialog()
  ruleForm.value = params
  centerDialogVisible.value = onStatus
}
// 2、定义发射给父组件的方法
const emit = defineEmits(['addClose', 'addParam'])

const refreshData = () => {
  centerDialogVisible.value = false
  ruleFormRef.value?.resetFields()
  emit('addClose', centerDialogVisible.value)
}

const validatePass = (rule: any, value: any, callback: any) => {
  // console.log(value, 'value')
  if (ruleForm.value.dictName === '') {
    callback(new Error(t('dataDictionary.addFromDicName')))
  } else {
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  // console.log(value, 'value2')
  if (ruleForm.value.dictCode === '') {
    callback(new Error(t('dataDictionary.addFromDicCode')))
  } else {
    callback()
  }
}

const rules = reactive<FormRules>({
  dictName: [{ required: true, validator: validatePass, trigger: 'blur' }],
  dictCode: [{ required: true, validator: validatePass2, trigger: 'blur' }],
  descriptions: [{ required: false, trigger: 'blur' }]
})

// 添加
const formAdd = async (ruleForm) => {
  // console.log(ruleForm)
  // return
  delete ruleForm.value.id
  let result = await dictAdd(ruleForm.value)
  if (result.code == '200') {
    //成功
    ruleForm.value.dictName = ''
    ruleForm.value.dictCode = ''
    ruleForm.value.description = ''
    delete ruleForm.value.id
    centerDialogVisible.value = false
    emit('addParam', true)
  }
}
// 编辑
const formEdit = async (ruleForm) => {
  let result = await dictEdit(ruleForm.value)
  // console.log(ruleForm.value, 'ruleForm.value', result)
  if (result.code == '200') {
    centerDialogVisible.value = false
    emit('addParam', true)
  } else {
    new Error(result.message)
  }
}
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if (drawerTitle.value == '新增') {
        //请求
        formAdd(ruleForm)
      } else {
        //编辑
        formEdit(ruleForm)
      }
      // emit('addParam', ruleForm)
      // console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const onClose = (formEl) => {
  centerDialogVisible.value = false
  formEl.resetFields()
}
defineExpose({
  getParentParams
})
</script>

<style scoped>
:deep(.tf_btn) {
  padding-top: 20px;
  display: block;
}
</style>
